<template>
  <view>
    <!-- 已经登录的界面 -->
    <view v-if="islogin">
      <view class="line"></view>

      <view class="userinfo">
        <view class="img-box">
          <image :src="logo"></image>
        </view>
        
        <view class="">
          {{userinfo.tbUser.username}}
          ({{userinfo.tbUserInfo.nickname}})
        </view>
      </view>

      <view class="line"></view>

      <view>
        <button @click="notice" type="primary">公告信息</button>
      </view>

      <view class="line"></view>

      <view class="">
        <button @click="logout" type="warn">安全退出</button>
      </view>

    </view>

    <!-- 没有登录的界面 -->
    <view v-if="!islogin">
      <uni-section title="用户登录" type="line">
        <uni-card :cover="cover">
          <view class="">

            <uni-forms>
              <uni-forms-item label="登录名称">
                <uni-easyinput v-model="logininfo.username"></uni-easyinput>
              </uni-forms-item>
              <uni-forms-item label="密码">
                <uni-easyinput v-model="logininfo.password" type="password"></uni-easyinput>
              </uni-forms-item>
            </uni-forms>

          </view>

          <view slot="actions" class="card-actions">

            <view class="card-actions-item">
              <button @click="login" size="mini" type="primary">登录</button>
            </view>
            <view class="card-actions-item">
              <button size="mini" type="warn">重填</button>
            </view>

          </view>

        </uni-card>
      </uni-section>


    </view>

  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'

  import {
    api,
    tools
  } from '../../js/api.js'

  import {
    storeToRefs
  } from 'pinia'
  import userstore from '../../store/userinfo.js'

  const {
    islogin,
    userinfo
  } = storeToRefs(userstore())

  const {
    queryUser
  } = userstore();

  const logo = ref('')

  const logininfo = ref({
    "username": "",
    "password": ""
  })

  const notice = () => {
    uni.navigateTo({
      url: '/pages/notice/notice'
    })
  }

  const login = () => {
    api.post('/auth', logininfo.value, (data) => {
      let icon = data.success ? 'success' : 'error'
      uni.showToast({
        title: data.message,
        icon: icon,
        duration: 3000
      })
      queryUser()
    })
  }

  const logout = () => {
    api.delete('/auth', {}, () => {
      queryUser()
    })
  }
</script>

<style>
  .line {
    margin: 0.5rem 0px;
    border: 1px solid #dcdcdc;
  }

  .card-actions {
    display: flex;
    justify-content: space-around;
  }

  .userinfo {
    display: flex;
    align-items: center;
    padding: 1rem;
  }

  .img-box {
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
    overflow: hidden;
  }

  .img-box image {
    height: 3rem;
    width: 3rem;
    display: block;
  }

  /*  .card-actions-item {
    margin: 0.2rem;
    padding: 0.2rem 1rem;
    border-radius: 0.2rem;
    border: 1px solid #0000ff;
  } */
</style>